<template>
  <div class="pro-scroll-list">
    <scrolling-ribbon title="投资理财" optionsText="查看全部" title-colo="#000">
      <scrolling-card
        v-for="(card, index) of list"
        :key="`scrolling-card-${index}`"
        :title="card.proType"
        :introduction="card.proName"
        :number="card.proProfit"
        :prompt="card.prompt"
        :type="card.type"
        :titleColor="card.titleColor"
        :productID="card.id"
      ></scrolling-card>
    </scrolling-ribbon>
  </div>
</template>

<script>
import ScrollingRibbon from "@/components/ScrollingRibbon/ProductDisplay.vue";
import ScrollingCard from "@/components/Card/UiCard.vue";

export default {
  name: "ScrollingRibbonDemo",
  components: {
    ScrollingRibbon,
    ScrollingCard
  },
  data() {
    return {
      list: []
    };
  },
  methods: {
    queryRibbon () {
      let params = {
        pageNum: 1,
        pageSize: 5,
        searchCriteria07: "1"
      }
      this.$remote('/runtime/pocfinancial/selectPocFinancialListForPage.action', params)
        .then(res => {
          console.log('this is res', res)
          this.list = res.list
        })
    }
  },
  mounted() {
    this.queryRibbon()
    let p = new Promise((resolve, reject) => {
      if (Math.random()) {
        setTimeout(() => {
          resolve({
            data: [
              {
                title: "理财产品",
                introduction: "睿享(18个月)财富客户",
                number: 4.85,
                prompt: "参考年华净收益率",
                type: "percentage",
                titleColor: "#000"
              },
              {
                title: "投资理财基金",
                introduction: "上睿鑫达灵活配置",
                number: 0.9244,
                prompt: "基金最新净值(2018-11-02)",
                type: "decimal",
                titleColor: "#000"
              },
              {
                title: "保险",
                introduction: "大都会人寿保险",
                number: 10000000,
                prompt: "1-70周岁可以购买",
                type: "amount",
                titleColor: "#f00"
              },
              {
                title: "理财产品",
                introduction: "睿享(18个月)财富客户",
                number: 4.85,
                prompt: "参考年华净收益率",
                type: "percentage",
                titleColor: "#000"
              },
              {
                title: "理财产品",
                introduction: "睿享(18个月)财富客户",
                number: 4.85,
                prompt: "参考年华净收益率",
                type: "percentage",
                titleColor: "#000"
              }
            ]
          });
        }, Math.random() * 1000);
      } else {
        reject({
          err: "fail"
        });
      }
    });

    // p.then(res => {
    //   this.list = res.data;
    // }).catch(err => {
    //   throw err.err;
    // });
  }
};
</script>

<style scoped>
.pro-scroll-list >>> .product-display-contents {
  display: flex;
  padding: 0 15px;
}
.pro-scroll-list >>> .ui-card {
  flex: 1;
}
</style>
